<template>
    <ul class="list" >
        <li class="item"
            v-for="(item,k) in cities"
            :key="k"
        @click="handleAlhClick">
            {{k}}
        </li>
    </ul>
</template>

<script>
    export default {
        name: "Alphabet",
        props:['cities'],
        methods:{
            handleAlhClick:function (e) {
                this.$emit('change',e.target.innerText);

            }
        }

    }
</script>

<style scoped lang="stylus">
    @import '~@/assets/styles/varibles.styl'
    .list
        display: flex
        flex-direction: column
        justify-content: center
        position:absolute
        top:1.5rem
        left:7.18rem
        bottom:0
        width:.3rem
        .item
            line-height: .4rem
            text-align: center
            color: $bgColor
</style>
